<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const activeName = ref('first')
</script>

<template>
  <el-card>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="产品列表" name="first">
        <el-input
          v-model="input1"
          style="width: 240px"
          size="large"
          placeholder="输入账户进行搜索"
          :suffix-icon="Search"
        />
        <div class="table">
          <el-table :data="userData" border style="width: 100%">
            <el-table-column type="index" fixed label="序号" width="53" />
            <el-table-column prop="account" label="入库编号" width="150" />
            <el-table-column prop="name" label="产品名称" width="120" />
            <el-table-column prop="sex" label="产品类别" width="53" />
            <el-table-column prop="identity" label="单位" width="110" />
            <el-table-column prop="department" label="库存数量" width="150" />
            <el-table-column prop="email" label="产品单价(单位)" width="180" />
            <el-table-column prop="status" label="库存总价" width="60" />
            <el-table-column prop="createTime" label="库存状态" width="200" />
            <el-table-column prop="createTime" label="入库负责人" width="200" />
            <el-table-column prop="createTime" label="入库时间" width="200" />
            <el-table-column fixed="right" label="操作">
              <template #default>
                <el-button type="primary" size="small">申请出库</el-button>
                <el-button type="success" size="small">修改</el-button>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="审核列表" name="second">审核列表</el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  height: 100vh;
  margin-top: 12px;
  .table {
    margin-top: 20px;
  }
}
</style>
